<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" href="./../css/reset.css">
  <link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet">
  <style>
    #app {
      padding: 40px 0;
    }

    .editer-container {
      width: 100%;
      height: 300px;
      padding: 20px;
      text-align: center;
    }

    .editer-container h4 {
      text-align: left;
      /* font-weight: normal; */
    }

    .header-container {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      width: 100%;
      padding: 0 20px;
    }

    .header-item {
      margin-right: 6px;
    }
  </style>

  <script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script src="https://unpkg.com/vuesax"></script>
</head>

<body>
  <div id="app">
    <vs-row>
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="12">
        <div class="header-container">
          <div class="header-item">
            <vs-input label="门店名称" v-model="storeBaseInfo.storeName"></vs-input>
          </div>
          <div class="header-item">
            <vs-input label="门店轮播文字" v-model="storeBaseInfo.bannerText"></vs-input>
          </div>
          <div class="header-item">
            <vs-button size="small" type="border" @click="sendMsg('storeBaseInfo')">确认修改</vs-button>
          </div>
        </div>
      </vs-col>
    </vs-row>
    <vs-row>
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="4">
        <div class="editer-container">
          <vs-textarea height="150" label="今日营业额排名" v-model="todaySalesRanking"></vs-textarea>
          <div class="editer-footer">
            <vs-button size="small" type="filled" @click="sendMsg('todaySalesRanking')">确认修改</vs-button>
          </div>
        </div>
      </vs-col>
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="4">
        <div class="editer-container">
          <vs-textarea height="150" label="门店服务情况" v-model="storeServiceSituation"></vs-textarea>
          <div class="editer-footer">
            <vs-button size="small" type="filled" @click="sendMsg('storeServiceSituation')">确认修改</vs-button>
          </div>
        </div>
      </vs-col>
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="4">
        <div class="editer-container">
          <vs-textarea height="150" label="今日畅销菜品" v-model="todayMenuRanking"></vs-textarea>
          <div class="editer-footer">
            <vs-button size="small" type="filled" @click="sendMsg('todayMenuRanking')">确认修改</vs-button>
          </div>
        </div>
      </vs-col>
    </vs-row>
    <vs-row>
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="4">
        <div class="editer-container">
          <vs-textarea height="150" label="本月营业额排名" v-model="monthSalesRanking"></vs-textarea>
          <div class="editer-footer">
            <vs-button size="small" type="filled" @click="sendMsg('monthSalesRanking')">确认修改</vs-button>
          </div>
        </div>
      </vs-col>
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="4">
        <div class="editer-container">
          <vs-textarea height="150" label="今日营业单量趋势图" v-model="todaySalesTrend"></vs-textarea>
          <div class="editer-footer">
            <vs-button size="small" type="filled" @click="sendMsg('todaySalesTrend')">确认修改</vs-button>
          </div>
        </div>
      </vs-col>
      <vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="4">
        <div class="editer-container">
          <vs-textarea height="150" label="门店动态" v-model="storeNews"></vs-textarea>
          <div class="editer-footer">
            <vs-button size="small" type="filled" @click="sendMsg('storeNews')">确认修改</vs-button>
          </div>
        </div>
      </vs-col>
    </vs-row>
  </div>
</body>
<script>
  var goEasy = new GoEasy({
    appkey: 'BC-6b49dbcc4fec4333a907a97e60357e9c'
  });

  // goEasy.subscribe({
  //   channel: 'zmp_screen_share',
  //   onMessage: function (message) {
  //     console.log(message);
  //   }
  // });

  var vm = new Vue({
    el: '#app',
    data() {
      return {
        todaySalesTrend: JSON.stringify({
          updateTime: new Date().getTime(),
          categories: [
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00"
          ],
          series: [
            [
              49.9,
              71.5,
              106.4,
              129.2,
              144.0,
              176.0,
              135.6,
              148.5,
              216.4,
              194.1,
              95.6,
              54.4,
              216.4,
              194.1
            ],
            [
              7.0,
              6.9,
              9.5,
              14.5,
              18.2,
              21.5,
              25.2,
              26.5,
              23.3,
              18.3,
              13.9,
              9.6,
              9.5,
              14.5
            ]
          ]
        }),
        monthSalesRanking: JSON.stringify({
          updateTime: new Date().getTime(),
          data: {
            gapFromChampion: 10,
            gapFromNearest: 16,
            rankingList: [{
                storeName: "福州台江广达店",
                storePercent: 98
              },
              {
                storeName: "福州鼓楼井大店",
                storePercent: 82
              },
              {
                storeName: "福州台江交通万科",
                storePercent: 70
              },
              {
                storeName: "南平武夷山三姑店",
                storePercent: 60
              },
              {
                storeName: "本店",
                storePercent: 40
              }
            ]
          }
        }),
        storeNews: JSON.stringify({
          updateTime: new Date().getTime(),
          attendance: {
            numberOfLate: 1,
            numberOfLeave: 1,
            todayUnusualAttendance: 2,
            monthUnusualAttendance: 1
          },
          eventList: [
            "中秋榕城商贸城庆典",
            "榕城附小举行学生运动会",
            "12日~30日为十年店庆，会员充值享受8.5折优惠"
          ]
        }),
        todayMenuRanking: JSON.stringify({
          updateTime: new Date().getTime(),
          rankingList: [{
              name: "麻婆豆腐",
              count: 99
            },
            {
              name: "周麻婆红烧肉",
              count: 90
            },
            {
              name: "周麻婆泡菜鱼",
              count: 85
            },
            {
              name: "酸辣土豆丝",
              count: 80
            },
            {
              name: "肉沫蒸蛋小份",
              count: 60
            },
            {
              name: "时令蔬菜",
              count: 55
            },
            {
              name: "周麻婆脆皮鸭",
              count: 40
            },
            {
              name: "肉沫蒸蛋",
              count: 30
            },
            {
              name: "酸辣鸡杂小份",
              count: 20
            },
            {
              name: "时令青菜",
              count: 10
            }
          ]
        }),
        storeBaseInfo: {
          storeName: '福州鼓楼三坊七巷店',
          bannerText: '相信就算强大，怀疑只会抑制能力，而信仰就是力量'
        },
        storeServiceSituation: JSON.stringify({
          todayCountOfCustomer: 32,
          monthCountOfCustomer: 1962,
          todayGrowPercent: -3,
          monthGrowPercent: 5
        }),
        todaySalesRanking: JSON.stringify({
          updateTime: new Date().getTime(),
          data: {
            gapFromChampion: 31,
            gapFromNearest: 11,
            rankingList: [{
                storeName: "福清成龙行街店",
                storePercent: 80
              },
              {
                storeName: "本店",
                storePercent: 72
              },
              {
                storeName: "福州台江广达店",
                storePercent: 55
              },
              {
                storeName: "南宁邵武天润店",
                storePercent: 40
              },
              {
                storeName: "南平武夷山三姑店",
                storePercent: 30
              }
            ]
          }
        })
      }
    },
    methods: {
      sendMsg: function (code) {
        // 
        var msg = JSON.stringify({
          code: code,
          data: this[code]
        });
        // console.log(msg);
        goEasy.publish({
          channel: "zmp_screen_share",
          message: msg
        });
      }
    }
  })
</script>

</html>